<template>
	<div class="home-services py-5" id="services">
	  <div class="container py-lg-5 py-md-4 py-2">
	    <h3 class="title-style text-center mb-lg-5 mb-4">
	      蔬菜中的维生素含量</h3>
	    <div class="row justify-content-center">
	      <div class="col-lg-4 col-md-6 mt-md-0 mt-4" v-for="(item,i) in dataList" :key="i">
	        <div class="box-wrap position-relative">
	          <h4 class="number position-absolute fs-1">{{item.number}}</h4>
	          <h4><a href="#card" class="fs-25 fw-bold mt-5 my-4 text-dark text-decoration-none">{{item.name}}</a></h4>
	          <p>
							<img :src="item.img" alt="" class="w-100">
	          </p>
						<div class="progress m-5">
	            <div ref="progressBar" class="progress-bar bg-success progress-bar-striped" style="width: 0%;" role="progressbar1">{{item.percent}}
	            </div>
	          </div>
	          <button id="btnControl1" class="btn btn-warning" @click="startProgress(item)">查看维生素含量</button>
	        </div>
	      </div>		
	    </div>
	  </div>
	</div>
		
</template>

<script>
	export default {
		name:"vitmin",
		data(){
			return {
				isStarted1:false,
				isStarted2:false,
				isStarted3:false,
				progressBar1:null,
				progressBar2:null,
				progressBar3:null,
				dataList:[
					{
						number:'01',
						name:"辣椒",
						img:'/fruite/index/images/product-3.jpg',
						percent:70
					},
					{
						number:'02',
						name:"西红柿",
						img:'/fruite/index/images/product-1.jpg',
						percent:81
					},
					{
						number:'03',
						name:"黄瓜",
						img:'/fruite/index/images/product-5.jpg',
						percent:90
					},
				]
			}			
		},
		mounted(){
			this.progressBar1 = this.$refs.progressBar[0];
			this.progressBar2 = this.$refs.progressBar[1];
			this.progressBar3 = this.$refs.progressBar[2];
		},
		methods:{
			startProgress1(){
				if (!this.isStarted1) {
					this.isStarted1 = true;
				  // 开始进度条1动画
				  let width = 0;
				  let interval = setInterval(()=> {
				    if (width >= this.dataList[0].percent) {
				      clearInterval(interval); // 停止动画
				      this.isStarted1 = false; // 重置状态
				    } else {
				      width += 5; // 增加进度
				      this.progressBar1.style.width = width + '%'; // 更新进度条宽度
				      this.progressBar1.textContent = width + '% Complete'; // 更新进度条文本
				    }
				  }, 100); // 每100毫秒更新一次进度条
				} else {
				  // 停止进度条1动画
				  this.isStarted1 = false;
				}
			},
			startProgress2(){
				if (!this.isStarted) {
					this.isStarted2 = true;
				  // 开始进度条2动画
				  let width = 0;
				  let interval = setInterval(()=> {
				    if (width >= this.dataList[1].percent) {
				      clearInterval(interval); // 停止动画
				      this.isStarted2 = false; // 重置状态
				    } else {
				      width += 5; // 增加进度
				      this.progressBar2.style.width = width + '%'; // 更新进度条宽度
				      this.progressBar2.textContent = width + '% Complete'; // 更新进度条文本
				    }
				  }, 100); // 每100毫秒更新一次进度条
				} else {
				  // 停止进度条2动画
				  this.isStarted2 = false;
				}
			},
			startProgress3(){
				if (!this.isStarted3) {
					this.isStarted3 = true;
				  // 开始进度条3动画
				  let width = 0;
				  let interval = setInterval(()=> {
				    if (width >= this.dataList[2].percent) {
				      clearInterval(interval); // 停止动画
				      this.isStarted3 = false; // 重置状态
				    } else {
				      width += 5; // 增加进度
				      this.progressBar3.style.width = width + '%'; // 更新进度条宽度
				      this.progressBar3.textContent = width + '% Complete'; // 更新进度条文本
				    }
				  }, 100); // 每100毫秒更新一次进度条
				} else {
				  // 停止进度条3动画
				  this.isStarted3 = false;
				}
			},
			
			// 定义开始进度条动画的函数
			startProgress(item) {			  
			  switch(item.number){
					case "01":
						this.startProgress1();
						break;
					case "02":
						this.startProgress2();
						break;
					case "03":
						this.startProgress3();
						break;						
				}
			}				
		}
	}
	
	
	
	
var progressBar1 = document.querySelector('.progress-bar');
var progressBar2 = document.querySelectorAll('.progress-bar')[1];
var progressBar3 = document.querySelectorAll('.progress-bar')[2];

// 获取按钮元素
var btnControl1 = document.getElementById('btnControl1');
var btnControl2 = document.getElementById('btnControl2');
var btnControl3 = document.getElementById('btnControl3');

// 设置初始状态为未开始
var isStarted1 = false;
var isStarted2 = false;
var isStarted3 = false;

// 添加点击事件监听器
btnControl1 && btnControl1.addEventListener('click', function() {
  if (!isStarted1) {
    // 开始进度条1动画
    startProgress(progressBar1);
  } else {
    // 停止进度条1动画
    stopProgress(progressBar1);
  }
});

btnControl2 && btnControl2.addEventListener('click', function() {
  if (!isStarted2) {
    // 开始进度条2动画
    startProgress(progressBar2);
  } else {
    // 停止进度条2动画
    stopProgress(progressBar2);
  }
});

btnControl3 && btnControl3.addEventListener('click', function() {
  if (!isStarted3) {
    // 开始进度条3动画
    startProgress(progressBar3);
  } else {
    // 停止进度条3动画
    stopProgress(progressBar3);
  }
});


	
	
</script>

<style scoped>
	.home-services {
	    background-color: rgb(245, 213, 156);
	  }
		
		
		.box-wrap {
		  padding: 40px 30px;
		  transition: all 0.5s ease 0s;
		
		}
		
		.box-wrap:hover {
		  box-shadow: 0 25px 98px 0 rgb(235, 142, 27);
		}
		
		.box-wrap:hover h4.number {
		  opacity: .2;
		}
		
		.box-wrap h4 a {
		  display: block;
		}
		
		.box-wrap h4 a:hover {
		  color:rgb(235, 142, 27);
		}		
		
		h4.number {
		  line-height: 60px;
		  right: 40px;
		  top: 30px;
		  opacity: .07;
		  transition: 0.3s ease-in-out;
		}
		
		  /* 图标 */
		.icon a svg:hover{
		    color:rgb(212, 148, 70);
		}
		
	  
</style>